<template>
    <div class="house-management">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/sys/wordManagement?navIndex=3' }">数据中心</el-breadcrumb-item>
        <el-breadcrumb-item>用户信息</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row v-if="dtype=='list'">
        <el-row class="el-white-bgcolor el-font-14">
          <el-link
            :type="activeIndex=='file'?'primary':'text'"
            class="el-padding-10 el-padding-l-15 el-padding-r-15 el-border-b-2"
            :underline="false"
            :class="{'el-border-blue':activeIndex=='file'}"
            @click="activeIndex='file'">文件资源</el-link>
          <el-link
            :type="activeIndex=='text'?'primary':'text'"
             class="el-padding-10 el-padding-l-15 el-padding-r-15 el-border-b-2"
             :underline="false"
             :class="{'el-border-blue':activeIndex=='text'}"
             @click="activeIndex='text'">文章资源</el-link>
        </el-row>
        <ou-file v-if="activeIndex=='file'" @upload="upload"></ou-file>
        <ou-text v-else></ou-text>
      </el-row>
      <el-row v-if="dtype=='fileAdd'">
        <el-row class="el-margin-v-30 el-padding-l-25 el-padding-r-40" style="background:#f1f5f7;">
          <el-row class="el-padding-20 el-white-bgcolor">
            <!--button class="el-btn-file">
              <input type="file" @change="upload($event.target.files)" accept="application/vnd.ms-excel"/>
              <span>文件上传</span>
            </button-->
            <el-form :model="form">
              <el-form-item label="上传文件" :label-width="formLabelWidth">
                <el-upload
                  ref="uploadExcel"
                  :action="action"
                  :limit=limitNum
                  :auto-upload="false"
                  accept=".xlsx"
                  :before-upload="beforeUploadFile"
                  :on-change="fileChange"
                  :on-exceed="exceedFile"
                  :on-success="handleSuccess"
                  :on-error="handleError"
                  :file-list="fileList">
                  <el-button size="small" plain>选择文件</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传xlsx(Excel2007)文件，且不超过10M</div>
                </el-upload>
              </el-form-item>
              <el-form-item>
                <el-button size="small" type="primary" @click="uploadFile">立即上传</el-button>
                <el-button size="small">取消</el-button>
              </el-form-item>
            </el-form>
          </el-row>
        </el-row>
      </el-row>
      <el-row v-else>

      </el-row>

    </div>
</template>
<script>
  import ouFile from "./file.vue"
  import ouText from "./text.vue"
  import { bus } from "../../tools/bus";
  import { setItem, getItem } from "../../tools/common";
export default {
    data(){
      return {
        activeIndex:"file",
        dtype:"list",
        limitNum: 1,
        action:"http://47.96.109.220:8066/upload/file",
        formLabelWidth: '80px',
        form: {
          file: ''
        },
        fileList: []
      }
    },
    components:{
      ouFile,
      ouText
    },
    mounted(){

    },
    methods:{
      upload(files){
        console.log("aaaaaaa",files);
        this.dtype = "fileAdd";
        if(files){
          let url = "/upload/file";
          let info = getItem("info")?getItem("info"):{};
          let p = new FormData();
          p.append('file', files[0]);
          p.append('communityId', info.communityId);
          //console.log('fileChange', p.get("file"),p.get("communityId"));
          this.$http
            .fetch(url, p)
            .then(res => {
              this.dtype = "list";
            })
            .catch(err => {});
        }
      },
      rePrev(){
        this.dtype = "list";
      },
        // 文件超出个数限制时的钩子
      exceedFile(files, fileList) {
        this.$notify.warning({
          title: '警告',
          message: `只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`
        });
      },
      // 文件状态改变时的钩子
      fileChange(file, fileList) {
        console.log('change')
        console.log(file)
        this.form.file = file.raw
        console.log(this.form.file)
        console.log(fileList)
      },
      // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
      beforeUploadFile(file) {
        console.log('before upload')
        console.log(file)
        let extension = file.name.substring(file.name.lastIndexOf('.')+1)
        let size = file.size / 1024 / 1024
        if(extension !== 'xlsx') {
          this.$notify.warning({
            title: '警告',
            message: `只能上传Excel2017（即后缀是.xlsx）的文件`
          });
        }
        if(size > 10) {
          this.$notify.warning({
            title: '警告',
            message: `文件大小不得超过10M`
          });
        }
      },
      // 文件上传成功时的钩子
      handleSuccess(res, file, fileList) {
        this.$notify.success({
          title: '成功',
          message: `文件上传成功`
        });
      },
      // 文件上传失败时的钩子
      handleError(err, file, fileList) {
        this.$notify.error({
          title: '错误',
          message: `文件上传失败`
        });
      },
      uploadFile() {
        this.$refs.uploadExcel.submit()
        /*
        let formData = new FormData()
        formData.append('file', this.form.file)
        axios.post('https://jsonplaceholder.typicode.com/posts/',
          formData,
          { "Content-Type": "multipart/form-data" }
        )
        .then(res => {
          console.log('res')
          console.log(res)
        })
        .catch(err => {

        })
        */
      }
    }
}
</script>
